<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Todo</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />

        <style>
            .hiPriority { color:red; }
            .lowPriority { color:green; }
            .hilite { background:lightyellow; }
            .searchBox{ margin:5px; width:20%; margin-left: 5%; }
            .add_item_link{position:absolute; margin-left:5%; display:none; }
        </style>

        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type='text/javascript' src='/dwr/engine.js'></script>    
        <script type='text/javascript' src='/dwr/interface/TodoDWRService.js'></script>
        <script src="http://code.jquery.com/jquery-latest.js"></script> 
    </head>



    <body> 
        <!-- header -->
        <div data-role="header" align="center">My Assistant</div>

        <br/><br/>

        <!-- search box -->

        <!-- items -->

        <div data-mini="true" class="searchBox ui-listview" id="myList">

            <ul style="margin-left: 5%" class="add_item" id="content" data-filter="true" data-role="listview">

                <li class="middle" id="select1" data-filtertext="Milk"><span>Milk</span></li>
                <li class="middle" id="select2" data-filtertext="Honey">Honey</li>
                <li class="middle" id="select3" data-filtertext="Cheese">Cheese</li>

            </ul>

        </div>
        <div class="add_item_link"><a href="#" data-icon="plus" id="add_new_item" value="Add">Add Item</a></div>
    </body>



    <script type='text/javascript'>
                
        // hide/show button
        var u = $("div").find('ul li[id^="select"]').text();
        //This currently working based on existing list. Needs modifications.
        $('.searchBox').keyup(function() {
            if(u != 'Milk'){                
                $("div.add_item_link").show("fast");
            }
        });        
        
//        $('.searchBox').keyup(function() {
//            if(!u){
//                $("div.add_item_link").show("fast");
//            }
//        });
        
        
        // Change priority
        $('ul li[id^="select"]').click(
            function() {
                if ($(this).hasClass('lowPriority')) {

                    $(this).removeClass('lowPriority');
                    $(this).addClass('hiPriority');

                } else if ($(this).hasClass('hiPriority')) {

                    $(this).removeClass('hiPriority');
                    $(this).addClass('lowPriority');

                } else {

                    $(this).addClass('hiPriority');

                }

                $('ul#content').listview('refresh');                
            }
        );
        
        //TODO if hi-piroity is in middle of list, move item up.        
                 
        //hi-lite
        $("div").find('ul li[id^="select"]').hover(
            function () {$(this).addClass("hilite");},
            function () {$(this).removeClass("hilite");}
        );            
            
        // dynamic populate
        $('#myList').click(function(){
            TodoDWRService.getList(function(code){
                //TODO retrieve value 
            });   
        });
        
                
        
    </script>
</html>
